
import React, { useState } from "react";
import styles from "./select.module.scss";


const XSelect = ({
    options = [],//接收从父组件传下来的选项列表数组
    onChange = Function, //父组件传下来的onChange事件
    border,
}) => {
    const [open, setOpen] = useState("none"); //初始隐藏下拉框
    const [curLab, setCurLab] = useState(null); //用来显示选中值在框框上

    const onSelect = (value, options) => {
        setCurLab(options.label);  //设置显示值
        onChange(value, options); //把选中东西通过props中的onChange回给父组件
    }
    return (
        <>
            <div
                className={styles.select_box}
                style={{
                    border: border === false ? 'none' : " 1px solid rgb(5, 102, 157)"
                }}
            >
                <div className="show-box"
                    onClick={() => setOpen('block')}


                >
                    <div className="show-value">{curLab}</div>
                    <div className="show-icon">^</div>
                </div>
                <div className="list"
                    style={{ display: open }}
                    onMouseLeave={() => setOpen("none")}
                >
                    {
                        options.length > 0 && options.map((item, index) => {
                            return <div
                                key={index}
                                className="li"
                                onClick={() => onSelect(item.value, item)}
                            >{item.label}</div>
                        })
                    }
                </div>

            </div >
        </>
    )

}
export default XSelect;